<template>
  <div class="container">
    <div class="cardBox statisticsStyle">
      <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="supplierName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-tabs v-model="activeName" type="border-card" tab-position="top" class="statisTab" @tab-click="handClick">
          <el-tab-pane label name="1">
            <span slot="label">
              <i class="el-icon-s-release" /> 采购订单执行情况统计
            </span>
            <ProcureExecutionList ref="procureExecutionList" :fields="fields.ProcureDataList" />
          </el-tab-pane>
          <el-tab-pane label name="2">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 采购到货合格率
            </span>
            <ProcureArrivalTable ref="procureArrivalTable" :fields="fields.ProcureArrivalList" />
          </el-tab-pane>
          <el-tab-pane label name="3">
            <span slot="label">
              <i class="el-icon-s-marketing" /> 采购订货统计表
            </span>
            <OrderGoodsTable ref="orderGoodsTable" :fields="fields.OrderGoodsTableList" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </div>
  </div>
</template>
<script>
import ProcureExecutionList from './ProcureExecutionList'
import ProcureArrivalTable from './ProcureArrivalTable'
import OrderGoodsTable from './OrderGoodsTable'
import leftTree from '@/components/LeftTree'
import { getSupplierListApi } from '@/api/public'
export default {
  components: {
    leftTree,
    ProcureExecutionList,
    ProcureArrivalTable,
    OrderGoodsTable
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'supplierName'
      },
      defaultExpandKeys: ['-1'],
      breadcrumb: ['供应商'],
      activeName: '1',
      fields: {
        ProcureDataList: [],
        ProcureArrivalList: [],
        OrderGoodsTableList: []
      }
    }
  },
  computed: {},
  created() {},
  async mounted() {
    await this.getList()
    await this.initFields()
  },
  methods: {
    /**
     * @description: 查询所有供应商
     * @return {*}
     */
    async getList() {
      const res = await getSupplierListApi()
      if (res?.data.code === 200) {
        this.treeData = [
          { id: '-1', supplierName: '供应商', children: res.data.data }
        ]
      }
    },
    initFields() {
      const obj = {
        ProcureDataList: [],
        ProcureArrivalList: [],
        OrderGoodsTableList: []
      }
      this.fieldList.forEach((item) => {
        item.code.includes('@1') && obj.ProcureDataList.push(item)
        item.code.includes('@2') && obj.ProcureArrivalList.push(item)
        item.code.includes('@3') && obj.OrderGoodsTableList.push(item)
      })
      this.fields = obj
      // this.$refs['procureExecutionList'].wenzi(obj.ProcureDataList)
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = []
      this.returnNodeLabel(node.parent)
      this.breadcrumb.push(data.supplierName)
      let treeStr = data.supplierName === '供应商' ? '-1' : data.supplierName
      if (this.activeName == '1') {
        this.$refs['procureExecutionList'].getInfo(treeStr)
      } else if (this.activeName == '2') {
        this.$refs['procureArrivalTable'].getInfo(treeStr)
      } else {
        this.$refs['orderGoodsTable'].getInfo(treeStr)
      }
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.supplierName)
        this.returnNodeLabel(node.parent)
      }
    },

    handClick(tab) {
      if (tab.name === '1') {
        //
        console.log(this.fields.ProcureDataList)
      } else {
        //
        console.log(this.fields.ProcureArrivalList)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  padding: 10px;
}
</style>

<style lang='scss' >
.statisticsStyle {
  .el-tabs--border-card {
    margin-top: 10px;
    // border: none !important;
    box-shadow: none !important;
  }
}
.statisTab {
  .el-tabs__header {
    margin: 0 0 5px;
    .el-tabs__item {
      height: 34px;
      line-height: 34px;
    }
  }
  .el-tabs__content {
    padding: 5px !important;
  }
}
</style>
